<template>
	<view class="PendingOrder">
		<navBar><template #head>正在挂单</template></navBar>
		<view class='secureCase'>
			<view class="purchaseKoiNum">
				<view class="title">
					<view class="h3">收购KOI</view>
					<view class="color">交易完成</view>
				</view>
				<view class="content">
					<view class="left">
						<view>1.102<text>USDT</text></view>
						<view class="small">
							KOI收购单价
						</view>
					</view>
					<view class="right">
						<view>KOI收购总数：100</view>
						<view>KOI已收购：80</view>
						<view>USDT已支出：81.3021USDT</view>
					</view>
				</view>
				<van-progress :percentage="percentage" :show-pivot='false' track-color='#545557' stroke-width='4px' />
			</view>
			<view class="pending">
				<text>挂单编号</text>
				<view class="orderNum" @click="copy(orderNum)">
					{{orderNum}}
					<image src="/src/static/images/Order/order_copy.png" mode=""></image>
				</view>
			</view>
			<view class="orderList">
				<view class="title">订单列表</view>
				<view class="item" v-for="item in orderList" :key="item.id" @click="inPro(item)">
					<view class="topTitle">
						<view class="h3">{{item.toCoin==='KOI'?'收购KOI':'出售KOI'}}</view>
						<view class="color">{{!item.status?'交易完成':'交易完成'}}</view>
					</view>
					<view class="content">
						<view>
							<text>{{item.amount}}</text>
							<view class='small'>KOI收购数量</view>
						</view>
						<view class="borderLeft"></view>
						<view>
							<text>{{item.usdtAmount}}</text>
							<view class='small'>USDT支出数量</view>
						</view>
					</view>
					<view class="date">
						{{item.createTime}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import navBar from '@/components/navBar/index.vue'
	import { copy } from '@/utils/copy'
	import { QueryOrderList } from '@/api/PendingOrderList'
	import { onLoad } from '@dcloudio/uni-app';

	const percentage = ref(60);

	const orderNum = ref("hf9iwbonjcvh094f3r");

	const orderList = ref([
		{
			id: 1,
			state: "收购KOI",
			purchaseState: "交易完成",
			purchaseNum: "10000",
			disburse: "10313",
			date: "2023年10月15日 00:33:06",
		},
		{
			id: 2,
			state: "收购KOI",
			purchaseState: "交易完成",
			purchaseNum: "10000",
			disburse: "10313",
			date: "2023年10月15日 00:33:06",
		},
	]);

	const QueryOrder = async () => {
		const data = await QueryOrderList({ status: "1" })
		console.log(data)
		orderList.value = data.rows
	}

	function inPro(id : object) {
		uni.navigateTo({
			url: '/homeSub/PendingOrderPro/index?id=' + JSON.stringify(id)
		})
	}

	onLoad(() => {
		QueryOrder()
	})
</script>

<style lang="scss" scoped>
	.PendingOrder {
		min-height: 100vh;


		.secureCase {
			padding-top: 0 !important;
		}

		.purchaseKoiNum {
			height: 280px;
			padding: 32px;
			background: #2a2b2e;
			border-radius: 16px;
			box-sizing: border-box;
			color: #ffffff;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.h3 {
					font-size: 32px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					line-height: 40px;
				}

				.color {
					font-size: 24px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #f8444d;
					line-height: 33px;
				}
			}
		}

		.content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 24px;
			margin-bottom: 20px;
			font-size: 40px;
			font-family: PingFangSC, PingFang SC;
			color: #ffffff;
			line-height: 36px;

			.left {
				uni-text {
					font-size: 24px;
				}

				.small {
					font-size: 24px;
					line-height: 33px;
				}
			}

			.right {
				font-size: 24px;
			}
		}

		::v-deep.van-progress__portion {
			background: linear-gradient(151deg, #4e47ff 0%, #06ffdd 100%);
		}

		.pending {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80px;
			margin-top: 32px;
			padding: 0 32px;
			background: #2a2b2e;
			border-radius: 16px;
			font-size: 24px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 80px;
			box-sizing: border-box;

			.orderNum {
				display: flex;
				align-items: center;
				height: 80px;
				font-size: 24px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #7f7f81;
				line-height: 80px;
			}

			image {
				width: 30px;
				height: 30px;
				margin-left: 8px;
			}
		}

		.orderList {
			.title {
				height: 50px;
				margin: 64px 0 40px;
				font-size: 36px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #ffffff;
				line-height: 50px;
				letter-spacing: 1px;
			}

			.item {
				padding: 32px;
				height: 278px;
				margin-bottom: 24px;
				background: #2a2b2e;
				border-radius: 16px;
				box-sizing: border-box;
				color: white;
				text-align: center;

				.topTitle {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.h3 {
						font-size: 28px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						line-height: 40px;
					}

					.color {
						font-size: 24px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #f8444d;
						line-height: 33px;
					}
				}

				.content {
					padding: 0 74px;
					box-sizing: border-box;

					uni-text {
						height: 56px;
						font-size: 40px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #ffffff;
						line-height: 56px;
						letter-spacing: 1px;
					}

					.small {
						height: 33px;
						font-size: 24px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #ffffff;
						line-height: 33px;
					}

					.borderLeft {
						width: 1px;
						height: 70px;
						background-color: rgba(255, 255, 255, 0.2);
					}
				}

				.date {
					height: 29px;
					margin-top: 24px;
					font-size: 24px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #737375;
					line-height: 33px;
				}
			}
		}
	}
</style>